<template>
  <div class="register-form-container">
    <a-form
      id="formLogin"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item
        label="Mobile Phone No"
        :colon="false"
        required
      >
        <a-input
          v-decorator.trim="[
            'mobile',
            {
              rules: [
                formRules.required('Incorrect mobile invalid'),
                formRules.mobile('Incorrect mobile invalid'),
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          size="large"
          type="text"
          placeholder="Mobile Phone No"
        />
      </a-form-item>

      <a-form-item
        label="Verification Code"
        :colon="false"
        class="a-form-item-send-code"
      >
        <a-button
          class="send-code"
          shape="round"
          size="small"
          :disabled="isSendCode"
          @click="sendMobileCode"
        >
          {{ codeText }}
        </a-button>
        <a-input
          v-decorator.trim="[
            'code',
            {
              rules: [
                formRules.len({ len: 6 }, 'Incorrect code invalid'),
              ],
              validateTrigger: 'change'
            }
          ]"
          size="large"
          type="text"
          placeholder="Verification Code"
        />
      </a-form-item>

      <!-- shape="round" -->
      <a-button
        html-type="submit"
        class="primary-button"
        type="primary"
        size="large"
        block
        :loading="state.loginBtn"
        @click="handleSubmit"
      >
        The next step
      </a-button>
    </a-form>
  </div>
</template>

<script>
import form from './form';
import { mobile } from '@/utils/mixins/sendCode';
import formRules from '@/utils/form/rules';

export default {
  mixins: [form, mobile],

  data() {
    return {
      formRules
    };
  }
};
</script>

<style lang="scss">
.register-form-container {
  // has-error
  .has-error .ant-input:focus {
    border-right-width: 0!important;
    box-shadow: none
  }

  input:focus {
    // border: none;
    box-shadow: none;
    border-bottom-color: $theme-color;
  }
  input {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid $gray-16;
  }
  .ant-form label {
    color: $gray-17;
  }
  .ant-form-item {
    margin-bottom: 18px;
  }
  .login-tips-text {
    color: $gray-17;
    margin-top: $margin-xs;
    .link {
      cursor: pointer;
      color: $theme-color;
    }
  }
  .primary-button {
    margin-top: 26px;
  }

  .a-form-item-send-code {
    position: relative;
    .send-code {
      position: absolute;
      right: 0;
      bottom: -5px;
      z-index: 1;
    }
  }
}
</style>
